<template>
  <el-dialog title="编辑详细内容" :visible.sync="ClassifyState.addDetailDialog" width="600" top="2vh" @close='addDetailDialogClose'>
    <div class=" ClassifyAddClassifyDetail-box">
      <div>
        <span class="ClassifyAddClassifyDetail-box-title">概述</span>
        <el-input type="textarea" :rows="3" placeholder="请输入概述内容" v-model="summarize">
        </el-input>
      </div>
      <div>
        <span class="ClassifyAddClassifyDetail-box-title">参数</span>
        <ul v-for="(item,key) in argumentsArray" :key="key">
          <li class="flex-lrb">
            <el-input v-model="item.name" placeholder="参数名称"></el-input>
            <el-select v-model="item.type" placeholder="请选择">
              <el-option v-for="(typeItem,typeKey) in argumentsType" :key="typeKey" :label="typeItem" :value="typeItem">
              </el-option>
            </el-select>
          </li>
          <li>
            <el-input type="textarea" :rows="2" placeholder="请输入参数描述" v-model="item.describe"> </el-input>
          </li>
          <li>
            <el-button type="danger" @click="argumentsDel(key)">删除</el-button>
          </li>
        </ul>
        <div class="queryAddClassifyDetail-box-but">
          <el-button type="primary" @click="argumentsAdd">添加参数</el-button>
        </div>
      </div>
      <div>
        <span class="ClassifyAddClassifyDetail-box-title">示例</span>
        <ul v-for="(item,key) in demo" :key="key">
          <li>
            <span class="ClassifyAddClassifyDetail-box-title ClassifyAddClassifyDetail-box-title-son">描述</span>
            <el-input type="textarea" :rows="2" placeholder="请输入描述内容" v-model="item.describe"></el-input>
          </li>
          <li>
            <span class="ClassifyAddClassifyDetail-box-title ClassifyAddClassifyDetail-box-title-son">HTML代码</span>
            <el-input type="textarea" :rows="2" placeholder="请输入描述内容" v-model="item.html"></el-input>
          </li>
          <li>
            <span class="ClassifyAddClassifyDetail-box-title ClassifyAddClassifyDetail-box-title-son">结果</span>
            <el-input type="textarea" :rows="2" placeholder="请输入描述内容" v-model="item.result"></el-input>
          </li>
          <li>
            <el-button type="danger" @click="demoDel(key)">删除</el-button>
          </li>
        </ul>
        <div class="queryAddClassifyDetail-box-but">
          <el-button type="primary" @click="demoAdd">添加示例</el-button>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addDetailDialogClose">取 消</el-button>
      <el-button type="primary" @click="classifyDetailConfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { classifyDetail } from '../api/module/classify'
export default {
  components: {},
  props: ['summarize', 'argumentsArray', 'demo'],
  data () {
    return {
      argumentsType: ['String', 'Number'],//参数类型
    };
  },
  computed: {
    ...mapState('Classify', { //使用如下 {{ ClassifyState.name }}  console.log(this.ClassifyState.name)
      ClassifyState: state => state
    }),
  },
  methods: {
    ...mapActions('Classify', [
      'list'
    ]),
    /**关闭Dialog */
    addDetailDialogClose () {
      this.ClassifyState.addDetailDialog = false;
    },
    /**添加参数 */
    argumentsAdd () {
      let val = {
        name: '',//参数名称
        type: '',//参数类型
        describe: ''//参数描述
      }
      console.log(this.argumentsArray);
      this.argumentsArray.push(val);
    },
    /**删除参数 */
    argumentsDel (key) {
      if (this.argumentsArray.length == 1) {
        this.$message({
          message: '警告哦，这是一条警告消息',
          type: 'warning'
        });
        return false;
      }
      this.argumentsArray.splice(key, 1);
    },
    /**添加示例 */
    demoAdd () {
      let val = {
        describe: '',//示例描述
        html: '',//示例HTML代码
        result: ''//示例结果
      }
      this.demo.push(val);
    },
    /**删除示例 */
    demoDel (key) {
      if (this.demo.length == 1) {
        this.$message({
          message: '警告哦，这是一条警告消息',
          type: 'warning'
        });
        return false;
      }
      this.demo.splice(key, 1);
    },
    /**点击确定 */
    classifyDetailConfirm () {
      const data = {
        id: this.ClassifyState.classifyDetailID,
        summarize: this.summarize,
        argumentsArray: this.argumentsArray,
        demo: this.demo
      }
      classifyDetail(data).then(() => {
        this['list']('');
        this.addDetailDialogClose();
      })
    },
  },
  created () {
  },
  mounted () {

  },
};
</script>

<style>
.ClassifyAddClassifyDetail-box > div,
.ClassifyAddClassifyDetail-box li {
  margin-bottom: 12px;
}
.ClassifyAddClassifyDetail-box-title {
  display: inline-block;
  margin-bottom: 8px;
}
.ClassifyAddClassifyDetail-box-title-son {
  color: #999;
  text-indent: 1em;
}
.queryAddClassifyDetail-box-but button {
  width: 100%;
  padding: 12px;
}
</style>